<template>
  <div class="personal-main">
    <div class="personal-pay">
      <h3><i>贷款记录详情</i></h3>
      <div class="user-borrower" style="margin-top: 60px;margin-left: 50px">

        <template>
          <el-table
              :data="informations"
              style="width: 100%"
              :row-class-name="tableRowClassName">
            <el-table-column prop="today" :formatter="formatDate" label="还款日期" width="180"></el-table-column>
            <el-table-column prop="way" label="还款方式" width="100"></el-table-column>
            <el-table-column prop="paymoney" label="已还款金额" width="180"></el-table-column>
            <el-table-column prop="lastmoney" label="剩余还款金额"></el-table-column>
          </el-table>
        </template>

      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "information",
  data() {
    return {
      tableData: [{
        today: '2016-05-02',
        way:'分期还款',
        payMoney: 1200,
        lastMoney:100,
      },
        {
          today: '2016-06-02',
          way:'全部还款',
          payMoney: 150,
          lastMoney:100,
        },
      ],
      informations:[],
    }
  },
  created() {
    this.$axios
        .post(`http://localhost:9090/loan/information/getInformationListByuid`).then(
        response => {
          this.informations=response.data;

        }
    )

  },

  methods: {
    //日期转换
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property]
      if(data == null) {
        return null
      }
      let dt = new Date(data)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
    },
    tableRowClassName({rowIndex}) {
      // tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }
  },

}
</script>

<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
